<template>
  <div class="header">
    <div class="right-menu">
      <el-menu
        mode="horizontal"
        :defult-active="getActiveRoute"
        :ellipsis="false"
        menu-trigger="click"
        @select="(route:string) => handleSelect(route, 'pc')"
      >
        <el-menu-item index="blog"
          ><el-icon><HomeFilled /></el-icon>主页</el-menu-item
        >
        <el-menu-item index="blogEdit" v-if="getUserInfo?.id"
          ><el-icon><EditPen /></el-icon>发博客</el-menu-item
        >
        <el-menu-item index="ai"
          ><el-icon><Monitor /></el-icon>AI</el-menu-item
        >
        <el-menu-item index="home"
          ><el-icon><PictureFilled /></el-icon>相册</el-menu-item
        >
        <el-menu-item index="daily"
          ><el-icon><ChatDotSquare /></el-icon>说说</el-menu-item
        >
        <el-menu-item index="category"
          ><el-icon><Grid /></el-icon>分类</el-menu-item
        >
        <el-menu-item index="star" v-if="getUserInfo?.id"
          ><el-icon><StarFilled /></el-icon>收藏</el-menu-item
        >
        <el-menu-item index="about">
          <el-icon><InfoFilled /></el-icon>关于
        </el-menu-item>
        <el-menu-item router="false" index="login" v-if="!getUserInfo?.id"
          ><el-icon><Avatar /></el-icon>登录</el-menu-item
        >
        <div v-else class="user">
          <el-sub-menu index="/#">
            <template #title
              ><el-avatar :src="getHeadPic" :size="30">{{
                getUserInfo?.nickName
              }}</el-avatar></template
            >
            <el-menu-item index="userCenter"
              ><el-icon><Avatar /></el-icon> 个人中心</el-menu-item
            >
            <el-menu-item index="logout"
              ><el-icon><SwitchButton color="red" /></el-icon>
              退出</el-menu-item
            >
          </el-sub-menu>
        </div>
      </el-menu>
    </div>
    <div class="mobile-menu">
      <img width="20" height="20" :src="mobile_menu" @click="showDrawer" />
      <h2 style="width: 100%; text-align: center; color: black">
        {{ mobile_router }}
      </h2>
    </div>
  </div>
  <el-drawer
    v-model="drawerShow"
    :before-close="handleClose"
    direction="ltr"
    size="60%"
    style="background-color: #ffffff"
  >
    <template #header>
      <div style="color: #409EFF;">菜单</div>
    </template>
    <el-menu
      :defult-active="getActiveRoute"
      :ellipsis="false"
      menu-trigger="click"
      @select="(route:string) => handleSelect(route, 'mobile')"
    >
      <el-menu-item index="blog"
        ><el-icon><HomeFilled /></el-icon>主页</el-menu-item
      >
      <el-menu-item index="blogEdit" v-if="getUserInfo?.id"
        ><el-icon><EditPen /></el-icon>发博客</el-menu-item
      >
      <el-menu-item index="ai"
        ><el-icon><Monitor /></el-icon>AI</el-menu-item
      >
      <el-menu-item index="home"
        ><el-icon><PictureFilled /></el-icon>相册</el-menu-item
      >
      <el-menu-item index="daily"
        ><el-icon><ChatDotSquare /></el-icon>说说</el-menu-item
      >
      <el-menu-item index="category"
          ><el-icon><Grid /></el-icon>分类</el-menu-item
        >
      <el-menu-item index="star" v-if="getUserInfo?.id"
        ><el-icon><StarFilled /></el-icon>收藏</el-menu-item
      >
      <el-menu-item index="about">
        <el-icon><InfoFilled /></el-icon>关于
      </el-menu-item>
      <el-menu-item index="login" v-if="!getUserInfo?.id"
        ><el-icon><Avatar /></el-icon>登录</el-menu-item
      >
      <el-menu-item index="logout" v-else>
        <el-icon><SwitchButton color="red" /></el-icon> 退出
      </el-menu-item>
    </el-menu>
  </el-drawer>
  <Login class="login-dialog" />
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import Login from "./Login.vue";
import { getCookie } from "@/utils/token";
import { user } from "@/store";
import { storeToRefs } from "pinia";
import { ElNotification } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { removeCookie } from "@/utils/token";
import { _removeLocalItem } from "@/utils/tools";

/**
 * 使用 import.meta.url 解析相对路径
 * @param import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL
 * @returns 解析后的 URL 字符串
 */
const mobile_menu = new URL("../../assets/svg/mobile_menu.svg", import.meta.url)
  .href;
const userStore = user();
const { getHeadPic, getUserInfo } = storeToRefs(userStore);
const isRotating = ref<boolean>(false);
const drawerShow = ref<boolean>(false);
const router = useRouter();
const route = useRoute();
const mobile_router = ref<string>("");

const menuMap = new Map([
  ["/blog", "博客文章"],
  ["/blogEdit", "写博客"],
  ["/home", "相册"],
  ["/daily", "说说"],
  ["/ai", "Chat JPT"],
]);

const toLogin = () => {
  userStore.setShowLogin(true);
};
const handleClose = () => {
  drawerShow.value = false;
};

const showDrawer = () => {
  drawerShow.value = true;
};

const onMouseOver = () => {
  isRotating.value = true;
};

const onMouseLeave = () => {
  isRotating.value = false;
};

const logOut = async () => {
  removeCookie("accessToken");
  _removeLocalItem("access_token");
  // _removeLocalItem('refresh_token')
  await userStore.clearUserInfo();
  setTimeout(() => {
    router.push("/blog");
  }, 200);
};

const getActiveRoute = computed(() => {
  return route?.path;
});
// 切换menu
const handleSelect = async (val: string, type: "mobile" | "pc") => {
  if (val == "logout") {
    await logOut();
    ElNotification.success({
      title: "Success",
      message: "退出成功",
      offset: 100,
      duration: 500,
    });
  } else if (val == "login") {
    router.push("/blog");
    toLogin();
  } else if (val == "userCenter" && !getCookie("accessToken")) {
    toLogin();
  } else {
    router.push(val);
  }
  if (type == "mobile") {
    drawerShow.value = false;
  }
};

watch(
  () => router.currentRoute.value.path,
  (newVal) => {
    mobile_router.value = menuMap.get(newVal) || "";
  }
);
</script>

<style lang="scss" scoped>
.mobile-menu {
  height: inherit;
}
.header {
  height: 60px;
  background-color: #fcfdfe;
  padding: 0;
  display: fixed;
}

.avatar-bl {
  background-image: url("https://jiangeges.oss-cn-heyuan.aliyuncs.com/front-end/hqj.png");
  // width: 100px;
  height: 60px;
  background-position: center;
  background-size: cover;
  // margin-right: 10px;
  // .avatar {
  //   transition: transform 0.5s ease;
  //   width: 50px;
  //   height: 50px;
  //   background: url("https://jiangeges.oss-cn-heyuan.aliyuncs.com/front-end/hqj.png")
  //     no-repeat center center;
  //   background-size: cover;
  //   border-radius: 50%;
  // }
}

// .avatar:hover {
//   transform: rotate(360deg);
// }
.el-menu {
  .el-menu-item {
    border-radius: 5%;
    width: 96px !important;
    width: unset;
    padding: 0;
    font-weight: 800;
    border-bottom: none;
  }
  .el-menu-item.is-active {
    border-bottom: none;
    // background-color: #ffffff;
  }
}
.el-menu--horizontal.el-menu {
  border-bottom: none;
}

@media screen and (max-width: 768px) {
  .login-dialog {
    width: 100%;
  }
  .el-menu {
    background-color: #ffffff;
    min-width: none;
    border-right: none !important;
  }
  .right-menu {
    display: none;
  }
  .mobile-menu {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }
}

@media screen and (min-width: 768px) {
  .login-dialog {
    width: 30% !important;
  }
  .el-menu {
    background-color: #F5F5F5;
    min-width: 800px;
  }
  .right-menu {
    display: block;
  }
  .mobile-menu {
    display: none;
  }
}

.user {
  @include flex();
}
</style>
